<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 同一文件中的变量污染
    var userId = 123;
	document.onclick = function () {
	    // console.log("userId = ",userId);
	    alert("userId = "+userId);
	};

	//一长串代码后，假如看不见上述代码了,这里定义的userId，是否会影响到上边的userId
	//click点击document后，输出123还是456？如何解决 立即执行即可解决

    // 在函数里面就不影响,
	// function nam() {
	//     var a=2,b=3;
	//     if(a<b){
	//         var userId = 456;
	//     }
	// }
    // nam();

    // 如果不在函数里面，就是需要在通过利用立即执行表达式让var a=2,b=3;if(a<b){var userId = 456;} 执行
    // 因为本身就是让他执行，没必要写一个函数在调用这个函数。
	(function () {
	    var a=2,b=3;
	    if(a<b){
	        var userId = 456;
	    }
	}());

    //  JS（ES5）中没有块作用域，容易造成js文件内或文件间的同名变量互相污染
    // 我们往往会通过IIFE(立即执行表达式)引入一个新的作用域来限制变量的作用域，来避免变量污染 
    // JS（ES5）是有函数作用域的。

</script>
</html>